<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    <!-- <div style="display:inline-block;width:140px;font-size:18px;color:#000">
                        效期商品查询
                    </div> -->
                    <div class="biaoti">效期商品查询</div>
                    <div class="form-group" style="margin-left: 10%;">
                        <label class="">综合输入</label>
                        <input type="text" class="form-control suppliers input-group-sm" placeholder="请输入供货商、商品编号" >
                    </div>
                   <div class="control-group form-group">
                        <label class="control-label">选择日期</label>
                        <div class="controls input-append date " style="display:inline-block;" data-date="" >
                            <input size="16" type="text" @change="check"  class="data form-control form_date" data-date-format="yyyy-mm-dd" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                            <span class="add-on"><i class="icon-remove"></i></span>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                        <input type="hidden" id="dtp_input2" value="" /><br/>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="query" >查询</button>
                    </div>
                    <div class="btn-group text-right" style="text-align: right;float: right;" >
                        <button  type="submit"  class="btn btn-default"  @click="btn_di"> 导出表格</button>
                        <!-- <button  type="submit"  class="btn btn-default" ><a style="color:#fff" :href="cfg.api +'/WRLSController/selectJXQDY?&file='+yaopinm0+'&title='+yaopinm0+'&rq='+rq+'&dwmch='+dwmch"  download="a.xlsx"> 导出表格</a></button> -->
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="list-h">
                        <div class="btn-group">
                            <button class="btn ">商品明细</button>
                            <!-- <button class="btn">处方类销售查询</button>
                            <button class="btn">含麻类销售查询</button>
                            <button class="btn">中药配方查询</button>
                            <button class="btn">医保销售流水</button>
                            <button class="btn">效期药师指导</button> -->
                        </div>
                    </div>
                    <div class="table-wrap">
                        <div class="table-box ">
                            <table class="table table-striped tc">
                                <tbody>
                                    <tr>
                                        <th style="text-align:left;">货位名称</th>
                                        <th style="text-align:left;">商品编号</th>
                                        <th style="text-align:left;">通用名</th>
                                        <th style="text-align:left;">商品名称</th>
                                        <th style="text-align:left;">商品规格</th>
                                        <th style="text-align:left;">产地</th>
                                        <th style="text-align:left;">包装单位</th>
                                        <th style="text-align:right">数量</th>
                                        <th style="text-align:left;">批号</th>
                                        <th style="text-align:left;">有效期至</th>
                                        <th style="text-align:right">单价</th>
                                        <th style="text-align:right">金额</th>
                                        <th style="text-align:left;">单位名称</th>
                                    </tr>
                                    <tr v-for="items in yaopin">
                                        <td style="text-align:left;">{{items.huowname}}</td>
                                        <td style="text-align:left;">{{items.spbh}}</td>
                                        <td style="text-align:left;">{{items.tongym}}</td>
                                        <td style="text-align:left;">{{items.spmch}}</td>
                                        <td style="text-align:left;">{{items.shpgg}}</td>
                                        <td style="text-align:left;">{{items.shpchd}}</td>
                                        <td style="text-align:left;">{{items.dw}}</td>
                                        <td style="text-align:right">{{items.shl | formatPrice}}</td>
                                        <td style="text-align:left;" >{{items.pihao}}</td>
                                        <td style="text-align:left;">{{items.sxrq}}</td>
                                        <td style="text-align:right">{{items.dj | formatPrice}}</td>
                                        <td style="text-align:right">{{items.je | formatPrice}}</td>
                                        <td style="text-align:left;">{{items.dwmch}}</td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pager-box clearfix pt15">
                            <div class="pull-left">共计
                                <span class="blue">{{count}}</span>条信息 
                                <!-- <span class="blue">{{count}}</span>个商品 -->
                                </div>
                                <div class="pull-right">
                                    <div id="pagenav5" class="tcdPageCode"></div>
                                </div>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import bus from '../api/eventBus';
    import {
        setUi,
        setUserCode,
        setPopStatus
    } from '../vuex/actions'
    import {
        ui,
        userCode,
        popStatus
    } from '../vuex/getters'
    export default {
        components: {},
        data() {
            return {
                v: 1686,
                yaopin: [],
                count: '',
                row: '',
                dwmch: '',
                rq: '',
                fdbs: ''

            }
        },
        watch: {

        },
        vuex: {
            getters: {
                ui,
                userCode,
                popStatus,
            },
            actions: {
                setUi,
                setUserCode,
                setPopStatus
            }
        },
        methods: {
            check(e) {
                let me = this;
                var a = /^(\d{4})-(\d{2})-(\d{2})$/
                if (!a.test($('.data').val())) {
                    layer.msg("日期格式不正确!");
                    return false
                } else {
                    return true
                }
            },
            query(e) {
                let me = this;
                me.getUserPageList5 = function(curr) {
                    $.ajax({
                        type: 'get',
                        url: me.cfg.api + '/WRLSController/selectJXQ',
                        data: {
                            page: curr || 1,
                            rows: me.row,
                            rq: $('.data').val(),
                            dwmch: $('.suppliers').val(),
                            fdbs: me.fdbs

                        },
                        dataType: 'json',
                        success: function(data) {
                            console.log("===商品有效期===");
                            console.log(data);
                            if (data.code == 200) {
                                me.yaopin = data.data.hz;
                                me.count = data.data.count;
                                console.log(me.yaopin);
                            }
                            laypage({
                                cont: 'pagenav5', //容器。值支持id名、原生dom对象，jquery对象,
                                pages: data.data.pagCount, //总页数
                                first: '第一页',
                                last: '最后一页',
                                curr: curr || 1, //当前页
                                jump: function(obj, first) { //触发分页后的回调
                                    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                        me.getUserPageList5(obj.curr);
                                    }
                                }
                            });
                        }
                    });
                }

                me.getUserPageList5();
            },
            btn_di(e) {
                let me = this;
                var yaopinm0 = "效期商品";
                var downloadToken = +new Date();
                var _self = this;
                var url = me.cfg.api + '/WRLSController/selectJXQDY?file=' + yaopinm0 + '&title=' + yaopinm0 + '&rq=' + $('.data').val() + '&dwmch=' + $('.suppliers').val() + '&fdbs=' + me.fdbs;
                var obj = {
                    time: downloadToken,
                    url: url,
                    _self: _self,
                }
                exportExcelForm(obj);
            }
        },
        mounted() {
            let me = this;
            me.fdbs = localStorage.getItem("fdbs");
            console.log(me.fdbs, '分店表示');
            let user = JSON.parse(sessionStorage.getItem("user"));
            let winHeight = $(window).outerHeight();
            if (winHeight <= 768) {
                me.row = 14
            } else if (winHeight <= 800) {
                me.row = 16
            } else if (winHeight <= 863) {
                me.row = 20
            } else {
                me.row = 22
            }
            if (!user) {
                router.push({
                    path: "/login"
                })
                return;
            }
            var time = new Date();
            let fullYear = time.getFullYear();
            let getMonth = time.getMonth() + 1;
            let getDate = time.getDate();
            if (getDate.toString().length == 2) {
                me.getDate = getDate;
            } else {
                me.getDate = '0' + getDate
            }

            me.today = fullYear + "-" + getMonth + "-" + me.getDate;
            $('.data').val(me.today);
            me.yaopinm0 = "效期商品";
            me.rq = $('.data').val();
            me.dwmch = $('.suppliers').val();
            $(".data").change(function() {
                me.rq = $('.data').val();
            });
            $(".suppliers").change(function() {
                me.dwmch = $('.suppliers').val();
            });
            $('.form_date').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
            });
            me.getUserPageList5 = function(curr) {
                $.ajax({
                    type: 'get',
                    url: me.cfg.api + '/WRLSController/selectJXQ',
                    data: {
                        page: curr || 1,
                        rows: me.row,
                        rq: $('.data').val(),
                        dwmch: $('.suppliers').val(),
                        fdbs: me.fdbs
                    },
                    dataType: 'json',
                    success: function(data) {
                        console.log("===商品有效期===");
                        console.log(data);
                        if (data.code == 200) {
                            me.yaopin = data.data.hz;
                            me.count = data.data.count;
                            console.log(me.yaopin);
                        }
                        laypage({
                            cont: 'pagenav5', //容器。值支持id名、原生dom对象，jquery对象,
                            pages: data.data.pagCount, //总页数
                            first: '第一页',
                            last: '最后一页',
                            curr: curr || 1, //当前页
                            jump: function(obj, first) { //触发分页后的回调
                                if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                    me.getUserPageList5(obj.curr);
                                }
                            }
                        });
                    }
                });
            }

            me.getUserPageList5();
            $(document).keydown(e => {
                let key = e.keyCode;
                if (key == 13) {
                    let me = this
                    me.getUserPageList5 = function(curr) {
                        $.ajax({
                            type: 'get',
                            url: me.cfg.api + '/WRLSController/selectJXQ',
                            data: {
                                page: curr || 1,
                                rows: me.row,
                                rq: $('.data').val(),
                                dwmch: $('.suppliers').val(),
                                fdbs: me.fdbs
                            },
                            dataType: 'json',
                            success: function(data) {
                                console.log("===商品有效期===");
                                console.log(data);
                                if (data.code == 200) {
                                    me.yaopin = data.data.hz;
                                    me.count = data.data.count;
                                    console.log(me.yaopin);
                                }
                                laypage({
                                    cont: 'pagenav5', //容器。值支持id名、原生dom对象，jquery对象,
                                    pages: data.data.pagCount, //总页数
                                    first: '第一页',
                                    last: '最后一页',
                                    curr: curr || 1, //当前页
                                    jump: function(obj, first) { //触发分页后的回调
                                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                                            me.getUserPageList5(obj.curr);
                                        }
                                    }
                                });
                            }
                        });
                    }

                    me.getUserPageList5();
                }
            })


        }
    }
</script>
<style>
    table td {
        word-break: keep-all;
        white-space: nowrap;
    }
</style>